<template>
  <view class="min100 plr-20 gray-2 pb-30 bg">
    <view class="status_bar"></view>

    <view style="height: 30rpx"></view>
    <!-- <view class="home-head flex mtb-34">
			<image
			  src="../../static/logo.png"
			  class="homeImg"
			  mode="aspectFill"
			></image>
			<image src="/static/search.png" mode="" class="search"></image>
		</view> -->

    <view class="radius-10 ">
      <!-- 轮播图 -->
      <u-swiper
        @click="toUrl"
        bg-color="#0A0B20"
        @change="changeDot"
        :list="banner"
        height="250"
        mode="none"
      ></u-swiper>
      <!-- 轮播图小圆点 -->
      <view class="home-swiper-dot">
        <view
          class="home-swiper-dot-li"
          :class="{ active: current == index }"
          v-for="(item, index) in banner"
          :key="index"
        ></view>
      </view>

<!--      <view class="flex flex-between home-fixed">-->
<!--        <view class="home-fixed-li" @click="toMetaverse">-->
<!--          <image :src="infoImage.image2" mode="aspectFill" class="img"></image>-->
<!--          <view class="marking flex1 flex-middle">-->
<!--            <text>创作者俱乐部</text>-->
<!--            <image-->
<!--              src="/static/entrance.png"-->
<!--              mode=""-->
<!--              style="margin-top: 2px"-->
<!--            ></image>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="home-fixed-li" @click="toClub">-->
<!--          &lt;!&ndash; <image src="/static/universe.png" mode="aspectFill" ></image> &ndash;&gt;-->
<!--          <image :src="infoImage.image3" mode="aspectFill" class="img"></image>-->
<!--          <view class="marking flex1 flex-middle">-->
<!--            <text>元宇宙互联</text>-->
<!--            <image-->
<!--              src="/static/entrance.png"-->
<!--              mode=""-->
<!--              style="margin-top: 2px"-->
<!--            ></image>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->

      <!-- 公告 -->
      <view class="home-notice flex1 flex-middle pl-20 plr-20">
		<image src="/static/index-001.png" class="home-notice-bg"></image>
        <view class="home-notice-left flex1 flex-middle">
          <image src="/static//icon-16.png" mode="" style="width: 88rpx;height: 50rpx; margin-right: 16rpx;"></image>
		  <!-- 资讯 -->
        </view>
        <view class="home-notice-right flex1 flex-1">
          <swiper circular vertical class="swiper flex-1" autoplay>
            <swiper-item
                @click="toNotice(item.id)"
                v-for="(item, index) in noticeList"
                :key="index"
                class="txt flex-1"
                style="font-size: 30rpx"
            >
              {{ item.title }}
            </swiper-item
            >
          </swiper>
          <view
            class="home-notice-more flex1 flex-middle"
            @click="toNoticeList"
          >
            <text>更多</text>
            <image src="/static/more.png" mode=""></image>
          </view>
        </view>
      </view>
    </view>

	<view class="home-more">
		<image src="/static/index-002.png" alt="" @click="toCompound"></image>
		<image src="/static/index-003.png" alt="" @click="toDeving('频道')"></image>
		<image src="/static/index-004.png" alt="" @click="toDeving('积分商城')"></image>
	</view>
<!--    <view class="menu-row ">-->
<!--      <view class="menu-item" @click="toInvite">-->
<!--        <image src="/static/share-m.png"></image>-->
<!--        <text>邀请好友</text>-->
<!--      </view>-->
<!--      <view class="menu-item" @click="toinvites">-->
<!--        <image src="/static/hot.png"></image>-->
<!--        <text>邀请榜</text>-->
<!--      </view>-->
<!--    </view>-->

    <view class="tabsWrap flex flex-start">
      <view
        class="flex1 flex-middle tabsWrap-li"
        v-for="(item, index) in tabs"
        :key="index"
        @click="changeTop(index)"
      >
        <!-- <image src="/static/hua.png" mode="" v-if="topIndex == index"></image> -->
        <view
          :class="[topIndex == index ? 'tabActive' : '', 'mb-5 c3c3']"
          class="txt"
        >
          {{ item }}
        </view>
        <!-- <image
          src="../../static/btmLine.png"
          class="lineImg ml-48"
          v-if="topIndex == index"
        ></image> -->
        <view class="under-line" v-if="topIndex == index"> </view>
      </view>
    </view>

    <!-- 藏品列表 -->
    <view v-if="topIndex == 0">
      <empty v-if="collectList.length == 0"></empty>
      <view
        style="position: relative"
        v-else
        v-for="(item, index) in collectList"
        :key="index"
        @click="goDetails(item.id)"
      >
        <view class="collectItem radius-20 mb-30 size-22">
			<image src="/static/bg-003.png" mode="" class="bg2"></image>
          <image class="collectImg" :src="item.image" mode="aspectFill"></image>

          <view
            v-if="item.status == 1"
            class="itemTips plr-20 ptb-8"
            style="
              background: linear-gradient(
                to right,
                rgb(248, 144, 95),
                rgb(254, 182, 80)
              );
            "
          >
            {{ item.status_text }}
          </view>

          <view
            class="itemTips plr-20 ptb-8"
            v-if="item.status == 2"
            style="color: #e66633; background: #00000090"
          >
            {{ item.status_text }}
          </view>

          <view
            class="flex flex-start itemTips plr-20 ptb-8 bg-00"
            v-if="item.status == 3"
          >
            <image src="../../static/time.png" class="timeImg mr-8" style="position: relative; z-index: 1;"></image>
            <view class="gold">
              {{ item.status_text }}
            </view>
          </view>

          <view
            class="itemTips plr-20 ptb-8 flex center"
            v-if="item.status == 4"
            style="background: linear-gradient(to right, #cf58e5, #fc76d5)"
          >
            <view class="">
              {{ item.status_text }}
            </view>
            <u-count-down
              :timestamp="item.diff_time"
              bg-color="background:transparent"
              color="#fff"
              font-size="24"
              separator-color="#fff"
              style="margin-left: 5rpx"
              @end="endTime"
            ></u-count-down>
          </view>

          <view class="plr-20 ptb-20 white" style="position: relative; z-index: 9;">
            <view class="flex flex-start">
              <view class="size-32 bold">
                {{ item.name }}
              </view>
			  <image src="../../static/icon-15.png" class="homeIcon ml-20" mode=""> </image>
              <!-- <image
                src="../../static/homeIcon.png"
                class="homeIcon ml-20"
                mode=""
              ></image> -->
			  
              <view
                class="tipsRight gold plr-10 ptb-4 radius-6 "
                v-if="item.label"
                style="margin-left: auto; position: relative;"
              >
                <!-- {{ item.label }} -->
              </view>
            </view>

			  <view class="item-num">
				  <text>限量</text>
				  <text>{{ item.stock }}份</text>
			  </view>
			  <view class="item-auth">
			  	{{ item.author_name }} 
			  </view>
			  <view class="item-price">
			  	<text>￥</text>{{ item.price }} 
			  </view>
            <!-- <view class="mtb-20 flex flex-start">
              <view class="bg-gold color-1a mr-20 plr-10 ptb-4 radius-6">
                {{ item.goods_category_name }}
              </view>

              <view class="flex flex-start mr-20">
                <view
                  class="bg-gold color-1a plr-10 ptb-4"
                  style="border-radius: 6rpx 0 0 6rpx"
                >
                  限量
                </view>
                <view
                  class="tipsRight gold plr-10 ptb-4"
                  style="border-radius: 0 6rpx 6rpx 0"
                >
                  {{ item.stock }}
                </view>
              </view> -->

              <!-- <view class="tipsRight gold plr-10 ptb-4 radius-6" v-if="item.label">
                {{ item.label }}
              </view> -->
            <!-- </view> -->

            <!-- <view class="flex flex-between">
              <view class="flex flex-start">
                <image
                  :src="item.author_image"
                  class="userImg"
                  mode="aspectFill"
                ></image>
                <view class="size-24 ml-10" style="color: #7d7d7d">
                  {{ item.author_name }}
                </view>
              </view>

              <view class="size-44 bold gold">
                ￥{{ item.price }}
              </view>
            </view> -->
          </view>
        </view>
      </view>
    </view>
    <!-- 发售日历 -->
    <view v-if="topIndex == 1">
      <image src="../../static/saleIcon.png" class="saleIcon" mode=""></image>
      <empty v-if="saleList.length == 0"></empty>
      <view class="" v-else>
        <view
          class="white mb-20 radius-30"
          v-for="(itemOut, indexOut) in saleList"
          :key="indexOut"
        >
          <view class="pt-40 pb-40 size-36">{{ itemOut.time }}</view>
          <view class="" v-for="(item, index) in itemOut.data" :class="item.id">
            <!-- <view class="mb-20">
              {{ item.time }}
            </view> -->
            <empty v-if="item.data[0].goods.length == 0"></empty>
            <view v-else>
              <view
                class="flex flex-start mb-20 radius-16"
                style="background: #3b3d4b"
                v-for="(itemIn, indexIn) in item.data[0].goods"
                :key="indexIn"
              >
                <image
                  class="saleImg mr-30"
                  :src="itemIn.image"
                  mode="aspectFill"
                ></image>
                <view
                  class="flex1 flex-column flex-around flex-1"
                  style="height: 200rpx"
                >
                  <view class="size-32 bold">{{ itemIn.name }}</view>
                  <view class="flex flex-start">
                    <view
                      class="tipsLeft plr-20 ptb-4 bg-gold color-1a size-24"
                      style="border-radius: 6rpx 0 0 6rpx"
                    >
                      限量
                    </view>
                    <view
                      class="tipsRight red ptb-r plr-20 size-24 ptb-4"
                      style="border-radius: 0 6rpx 6rpx 0"
                    >
                      {{ itemIn.stock }}
                    </view>
                  </view>
                  <view class="size-40"> ￥{{ itemIn.price }} </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 内容精选 -->
    <view v-if="topIndex == 2">
      <empty v-if="conList.length == 0"></empty>
      <view class="" v-else>
        <view
          class="bg-1 mb-20 radius-30"
          v-for="(item, index) in conList"
          :key="index"
          @click="goCon(item.id)"
        >
          <image :src="item.image" class="conImg radius-30"></image>
          <view class="plr-30 ptb-30">
            <view class="white">
              {{ item.title }}
            </view>
            <view
              class="size-24 gray-2 mt-20 text-ellipsis-2"
              style="width: 630rpx"
            >
              {{ item.desc }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部下面 -->
    <!--  <view class="flex flex-between home-fixed" v-if="topIndex == 0">
			<view class="home-fixed-li" @click="toMetaverse">
				<image :src="infoImage.image2" mode="aspectFill" class="img"></image>
				<view class="marking flex1 flex-middle">
					<text>创作者俱乐部</text>
					<image src="/static/entrance.png" mode=""></image>
				</view>
			</view>
			<view class="home-fixed-li" @click="toClub">
				< <image src="/static/universe.png" mode="aspectFill" ></image> -->
    <!--<image :src="infoImage.image3" mode="aspectFill" class="img"></image>
				<view class="marking flex1 flex-middle">
					<text>元宇宙互联</text>
					<image src="/static/entrance.png" mode=""></image>
				</view>
			</view>
		</view>-->

    <!-- 实名认证 -->
    <view
      v-if="authShow"
      class="white flex flex-between radius-20 size-26 ptb-30 pl-40 pr-22 authWrap"
    >
      <view class=""> 完成实名认证，抢购快人一步 </view>
      <view
        class="ptb-8 plr-28 authMid bg-gold color-1a radius-35"
        @click="toAuth"
        style="margin-left: auto;margin-right: 20rpx;"
      >
        实名认证
      </view>
      <u-icon name="close" color="#9A9A9A" @click="closeAuth"></u-icon>
    </view>
    <!-- 去登录 -->
    <view
      v-if="loginShow"
      class="white flex flex-between radius-20 size-26 ptb-30 pl-40 pr-22 authWrap"
    >
      <view @click="toLogin"> 去登录，抢购快人一步 </view>
      <view class="flex flex-between">
        <view
          class="ptb-8 plr-20 authMid bg-gold color-1a radius-35 mr-20"
          @click="toLogin"
        >
          登录
        </view>
        <u-icon
          name="close"
          color="#9A9A9A"
          @click="loginShow = false"
        ></u-icon>
      </view>
    </view>

    <tabbar ref="tabbar"></tabbar>
  </view>
</template>

<script>
import empty from "../../components/empty.vue";
import tabbar from "../../components/tabbar.vue";
export default {
  components: {
    empty,
    tabbar,
  },
  data() {
    return {
      flag: false, //上拉加载
      loginShow: false,
      token: "",
      page: 1,
      status: "more",
      authShow: false,
      topIndex: 0,
      tabs: ["数字藏品", "发售日历"],
      banner: [],
      collectList: [],
      saleList: [],
      conList: [],
      current: 0, //轮播图下标
      noticeList: [], //首页公告
      infoImage: {}, //背景图
      userInfo: {}
    };
  },
  onShow() {
    this.$refs['tabbar'].init();
  },
  onLoad() {
    this.token = uni.getStorageSync("token");
    if (this.token) {
      this.loginShow = false;
      this.$http("api/user/userInfo").then((res) => {
        if (res.is_auth == 0) {
          this.authShow = true;
        } else {
          this.authShow = false;
        }
      });
    } else {
      this.loginShow = true;
    }
    // 轮播图
    this.$http("api/index/bannerList").then((res) => {
      this.banner = res;
    });
    this.init();
    this.getgongGao();
    if (uni.getStorageSync('token')) {
      this.getUserInfo();
    }
    this.getImageBei();
  },
  onHide() {
    // this.collectList = [];
    // this.flag = false;
    // this.status = "more";
    // this.page = 1;
  },
  onReachBottom() {
    if (!this.flag) {
      this.status = "loading";
      this.page++;
      this.init();
    }
  },
  onPullDownRefresh() {
    this.flag = false;
    this.page = 1;
    this.collectList = [];
    this.init();
  },
  methods: {
	// 合成藏品
	toCompound() {
		uni.navigateTo({
			url: "/pages/chip/index",
		});
	},
	toDeving(title = '') {
		uni.navigateTo({
			url: '/pages/deving?title=' + title,
		});
	},
    getUserInfo() {
      this.$http("api/user/userInfo")
        .then((res) => {
          this.userInfo = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    nextStep() {
      this.goDetails(this.collectList[0].id);
    },
    tiaoguo() {
      this.isShow = false;
      uni.setStorageSync("isLogin", 1);
    },
    getImageBei() {
      this.$http("api/newapi/imageBei").then((res) => {
        this.infoImage = res;
      });
    },
    //公告列表
    toNoticeList() {
      uni.navigateTo({
        url: "/pages/home/notice",
      });
    },
    //公告详情
    toNotice(id) {
      uni.navigateTo({
        url: `/pages/home/noticeDetails?id=${id}`,
      });
    },
    //首页公告
    getgongGao() {
      this.$http("api/Newapi/gongGao").then((res) => {
        this.noticeList = res.slice(0, 5);
      });
    },
    //去俱乐部
    toMetaverse() {
      uni.navigateTo({
        url: "/pages/home/club",
      });
    },
    //元宇宙互联
    toClub() {
      uni.navigateTo({
        url: "/pages/home/metaverse",
      });
    },
    toLogin() {
      uni.navigateTo({
        url: "../login/index",
      });
    },
    goCon(id) {
      uni.navigateTo({
        url: "./conDetails?id=" + id,
      });
    },
    toAuth() {
      uni.navigateTo({
        url: "../my/realAuth",
      });
    },
    toInvite() {
      uni.navigateTo({
        url: "/pages/my/myInvite?uuid=" + this.userInfo.uuid,
      });
    },
    toinvites() {
      uni.navigateTo({
        url: "/pages/my/invite",
      });
    },
    init() {
      if (this.topIndex == 0) {
        this.$http("api/goods/goodsList", {
          page: this.page,
          pagesize: 10,
        }).then((res) => {
          uni.stopPullDownRefresh();
          let data = res.data;
          if (data.length == 0) {
            this.flag = true;
            this.status = "noMore";
          } else {
            this.collectList = this.collectList.concat(data);
            if (data.length < 10) {
              this.flag = true;
              this.status = "noMore";
            }
          }
          // console.log("当前页码：：",this.page);
          // let data = res.data;
          // if (this.collectList >= res.count) {
          // 	this.status = "nomore"
          // } else {
          // 	this.page = this.page + 1;
          // 	this.status = "loadmore";
          // 	console.log("改变页码：：",this.page);
          // }
          // this.collectList = this.collectList.concat(data);
          // uni.stopPullDownRefresh();
        });
      } else if (this.topIndex == 1) {
        this.$http("api/index/calendar").then((res) => {
          this.saleList = res;
        });
      } else if (this.topIndex == 2) {
        this.$http("api/index/noticeList").then((res) => {
          this.conList = res;
        });
      }
    },
    toUrl(index) {
      uni.navigateTo({
        url: "./bannerCon?info=" + this.banner[index].content,
      });
    },
    changeTop(index) {
      this.topIndex = index;
      this.saleList = [];
      this.conList = [];
      this.page = 1;
      this.collectList = [];
      this.init();
    },
    goDetails(id) {
      uni.navigateTo({
        url: "./homeDetails?id=" + id,
      });
    },
    closeAuth() {
      this.authShow = false;
    },
    changeDot(e) {
      this.current = e;
    },
    endTime() {
      this.saleList = [];
      this.conList = [];
      this.page = 1;
      this.collectList = [];
      this.init();
    },
  },
};
</script>
<style lang="less" scoped>
.white {
  color: #3c3c3c;
}
.gold {
  color: #9c8b66;
}
.home-head .search {
  width: 40rpx;
  height: 40rpx;
}
.homeImg {
  width: 252rpx;
  height: 34rpx;
}
.home-swiper-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0 0rpx 0;
}
.home-swiper-dot-li {
  width: 10rpx;
  height: 10rpx;
  background: #3b3d4b;
  border-radius: 50%;
  margin-right: 10rpx;
  &:last-child {
    margin-right: 0;
  }
}
.home-swiper-dot-li.active {
  width: 30rpx;
  background: #ffffff;
  border-radius: 5rpx;
  transition: all 0.2s;
}

.home-notice {
  height: 80rpx;
  // background: #fff;
  border-radius: 8rpx;
  font-size: 20rpx;
  position: relative;
  margin-top: 10px;
  
}
.home-notice-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.home-notice-left {
	font-size: ;
  image {
    width: 70rpx;
    height: 70rpx;
	position: relative;
  }
  // image::after {
	 //  content: '';
	 //  display: block;
	 //  width: 1px;
	 //  height: 20px;
	 //  background: #999999;
	 //  position: absolute;
	 //  right: -10px;
	 //  top: 0;
	 //  z-index: 99;
  // }
  text {
    margin: 0 20rpx;
    width: 2rpx;
    height: 50rpx;
    background: #ebebeb;
  }
}
.home-notice-right {
  .swiper {
    height: 50rpx;

    .txt {
      color: #3c3c3c;
      font-size: 28rpx;
      line-height: 50rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.home-notice-more {
  text {
    color: #3c3c3c;
    font-size: 22rpx;
  }
  image {
    width: 32rpx;
    height: 32rpx;
    margin-left: 5rpx;
  }
}

.lineImg {
  width: 40rpx;
  height: 14rpx;
}

.tabsWrap {
  margin: 26rpx 0;
  font-size: 34rpx;
  image {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    left: 0;
  }
  .tabsWrap-li {
    // width: 150rpx;
    height: 66rpx;
    // padding-left: 30rpx;
    position: relative;
    margin-right: 35rpx;
    .txt {
      // width: 150rpx;
      // left: 30rpx;
      // position: absolute;
      z-index: 9;
	  font-size: 28rpx;
	  color: #2B2B2B;
    }
  }
  .under-line {
    width: 100%;
    height: 24rpx;
	background: rgba(110,143,255,0.3);
    position: absolute;
    bottom: 8rpx;
  }
}
.tabActive {
  font-size: 36rpx !important;
  font-weight: 600;
}

.collectImg {
  width: 100%;
  height: 480rpx;
  border-radius: 20rpx 20rpx 0 0;
  background-color: rgb(31, 27, 47);
}

.collectItem {
  background: #fff;
  border: 1px solid #fff;
  overflow: hidden;
}
.homeIcon {
  width: 30rpx;
  height: 30rpx;
}

.timeImg {
  width: 24rpx;
  height: 24rpx;
}

.itemTips {
  position: absolute;
  right: 20rpx;
  top: 390rpx;
  background: #00000080;
  border-radius: 10rpx;
  color: #fff;
  font-size: 32rpx;
  z-index: 100;
  padding: 20rpx 20rpx;
  font-weight: 600;
  max-width: 500rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.tipsRight {
  background: rgba(255, 255, 255, 0.2);
}

.userImg {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  margin-top: 4rpx;
}

.saleIcon {
  width: 246rpx;
  height: 30rpx;
  margin: 30rpx auto;
  display: block;
}

.saleImg {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx 0 0 16rpx;
}

.conImg {
  width: 100%;
  height: 358rpx;
}

.authWrap {
  position: fixed;
  bottom: var(--window-bottom);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: #fff;
  width: 98vw;
  // padding: 0 10rpx;
  padding-right: 40rpx;
  padding-left: 40rpx;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  border-radius: 20rpx;

  .authMid {
    color: #fff;
    background: linear-gradient(90deg, #eea634, #de2d32);
  }
}

/deep/ .u-indicator-item-round-active {
  background-color: #efaa1c !important;
}
.home-fixed {
  margin-top: 15rpx;
  margin-bottom: 15rpx;
}
.home-fixed-li {
  width: 335rpx;
  height: 150rpx;
  position: relative;
  .img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 16rpx;
  }
  .marking {
    left: 0;
    width: 100%;
    bottom: 0;
    position: absolute;
    height: 50rpx;
    background: rgba(30, 31, 52, 0.5);
    border-radius: 0rpx 0rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    text {
      color: #ffffff;
      font-size: 28rpx;
      margin-right: 20rpx;
    }
    image {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.menu-row {
  display: flex;
  align-items: center;
  border-radius: 0 0 10rpx 10rpx;
  padding: 10rpx 0;
  position: relative;
  flex-wrap: wrap;
  background: #fff;
  .menu-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14rpx 0;
    image {
      width: 70rpx;
      height: 70rpx;
    }
    text {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #3c3c3c;
    }
  }
}
.c3c3 {
  color: #3c3c3c;
}

.home-more{
	display: flex;
	justify-content: space-between;
	margin-top: 19px;

	image {
		width: 113px;
		height: 66px;
	}
}
.item-num{
	width: max-content;
	height: 24px;
	line-height: 24px;
	border-radius: 4px;
	display: flex;
	overflow: hidden;
	margin-top: 8px;
	text:first-child{
		background: #F3C999;
		padding: 0 5px;
		color: #565656;
	}
	text:last-child{
		background: #EAD5B6;
		padding: 0 5px;
		color: #9B8667;
	}
}
.item-auth{
	font-size: 14px;
	color: #666666;
	margin-top: 8px;
}
.item-price {
	text-align: right;
	font-size: 19px;
	color: #101010;
	line-height: 19px;
	margin-top: 8px;
	text {
		font-size: 12px;
	}
}
.bg2 {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0
}
</style>
